<script>
import dialog1 from '../assets/dialog1.png';
import dialog2 from '../assets/dialog2.png';
import dialog3 from '../assets/dialog3.png';
import dialog4 from '../assets/dialog4.png';
import dialog5 from '../assets/dialog5.png';
import dialog6 from '../assets/dialog6.png';
import dialog7 from '../assets/dialog7.png';
import dialog8 from '../assets/dialog8.png';
import robot from '../assets/robot.svg';
export default {
    render(h){
        // 热门问题
        var hot_list = () => {
            let arr = this.dialogConfig.hot_list.map((item,index)=>{
                return <div onClick={this.finishFill.bind(this,item)}><span class="range-index">{index+1}</span><span>{item}</span></div>
            })
            return arr;
        };
        
        // 消息推送
        var message_list = () => {
            let arr = this.dialogConfig.message_list.map((item,index)=>{
                return this[`parseMessage_${item.type}`](item);
            })
            return arr;
        }

        return (
            <div class="container">
                <div class="content">
                    <div class="chat-container" ref="messagesContainer">
                        <span>EduDMiner智能助手</span>
                        <div class="type">
                            <p class="title">
                                <img src={robot}/>
                                <p>EduDMiner</p>
                            </p>
                            <div>
                                <div onClick={this.appendMessage.bind(this,'学者')}>
                                    <img src={dialog1} />
                                    <p>学者</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'项目')}>
                                    <img src={dialog2} />
                                    <p>项目</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'论文')}>
                                    <img src={dialog3} />
                                    <p>论文</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'期刊')}>
                                    <img src={dialog4} />
                                    <p>期刊</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'会议')}>
                                    <img src={dialog5} />
                                    <p>会议</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'单位')}>
                                    <img src={dialog6} />
                                    <p>单位</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'机构')}>
                                    <img src={dialog7} />
                                    <p>机构</p>
                                </div>
                                <div onClick={this.appendMessage.bind(this,'研究领域')}> 
                                    <img src={dialog8} />
                                    <p>研究领域</p>
                                </div>
                            </div>
                        </div>
                        <div class="message-container" style="margin-top:30px">
                            <div class="message animated fadeInLeft">
                                <div class="avatar"><img src={robot} alt="" width="50px" /></div>
                                <div class="text-container" style="height:45px;line-height:45px;padding-top:0;">
                                    <div >您好，我是您的EduDMiner智能助手，请问有什么可以帮您？</div>
                                </div>
                            </div>
                            {message_list()}
                        </div>
                    </div>
                    <div style="padding:15px">
                        <Tabs value="name1">
                            <TabPane label="热门问题" name="name1" class="hot-list">
                                {hot_list()}
                            </TabPane>
                        </Tabs>
                    </div>
                </div>
            </div>
        )
    },
    props: {
        dialogConfig: {
            type: Object
        }
    },
    watch:{
        dialogConfig:{
            handler:function(newVal){
                this.$nextTick(()=>{
                    //置底
                    document.querySelector('.chat-container').scrollTop = 100000000;
                });
                // 这里写响应函数
                if(newVal.message_list[newVal.message_list.length-1].type!='slotFill'){
                    this.$emit('response',newVal);
                }
            },
            deep: true
        }
    },
    methods:{
        appendMessage(item){
            let dialogConfig = this.dialogConfig;
            dialogConfig.message_list.push({
                type:'slotFill',
                content:item
            });
            this.$emit('upadate:dialogConfig',dialogConfig);
        },
        parseMessage_text(item){
            if(item.author == 'robot'){
                return <div class="message animated fadeInLeft">
                    <div class="avatar"><img src={robot} alt="" width="50px" /></div>
                    <div class="text-container">
                        <div class="text">{item.content}</div>
                    </div>
                </div>;
            }else{
                return <div class="message animated fadeInRight reverse">
                    <div class="text-container">
                        <div class="text">{item.content}</div>
                    </div>
                </div>;
            }
        },
        parseMessage_slotFill(item){
            var corpus = {
                '学者':['华中师范大学有哪些学者？','刘三女牙学者有哪些论文？','刘三女牙学者是哪个单位的？'],
                '项目':['关键词包含“教育”的项目有哪些？'],
                '论文':['关键词包含“教育”的论文有哪些？'],
                '期刊':['关键词包含“教育”的论文有哪些？','中国电化教育期刊属于哪个领域？','中国电化教育期刊目前有多少载文量？'],
                '会议':['教育技术领域的会议有哪些？','全球华人计算机教育应用大会（GCCCE）举办了多少届?'],
                '单位':['华中师范大学有哪些学者(仅限CSSCI、SSCI等有一作的)？'],
                '机构':['教育领域的机构有哪些？','国家数字化学习工程技术研究中心是什么机构？'],
                '研究领域':['目前比较热门的研究领域有哪些？']
            };
            var slot_list = () => {
                let arr = [];
                corpus[item.content].map(mes=>{
                    arr.push(<p onClick={this.finishFill.bind(this,mes)} class="slot-item">{mes}</p>)
                });
                return arr;
            }
            return <div class="message animated fadeInLeft">
                <div class="avatar"><img src={robot} alt="" width="50px" /></div>
                <div class="text-container">
                    <div class="text slot-text">您可以这样向我提问：</div>
                    <div style="height:2px;background:#eee;margin-top:5px;margin-bottom:5px"></div>
                    {slot_list()}
                </div>
            </div>;
        },
        finishFill(mes){
            let dialogConfig = this.dialogConfig;
            dialogConfig.message_list.push({
                type:'text',
                author:'user',
                content:mes
            });
            this.$emit('upadate:dialogConfig',dialogConfig);
        }
    }
}
</script>
<style lang="scss" scoped>
.chat-container::-webkit-scrollbar{  
    width: 6px;  
    height: 12px;  
    background-color: #ddd;  
}  

.chat-container::-webkit-scrollbar-track{  
    border-radius: 10px;  
    background-color: #ddd;  
}  

.chat-container::-webkit-scrollbar-thumb{  
    border-radius: 10px;  
       background-color: #ccc;  
}
.container{
    .content{
        display: flex;
        flex-direction: row;
        >div:nth-of-type(1){
            width: 70%;
            flex-shrink: 0;
        }
        >div:nth-of-type(2){
            width: 30%;
            flex-shrink: 0;
        }
        .chat-container{
            background:#eee;
            text-align: center;
            padding-bottom: 20px;
            height: 70vh;
            overflow-y: scroll;
            overflow-x: hidden;
            span{
                display: inline-block;
                margin-top: 10px;
            }
            .type{
                position: relative;
                margin-top: 35px !important;
                width: 60%;
                margin-left: 20%;
                background: white;
                margin-top: 10px;
                border-radius: 5px;
                box-shadow: 0px 2px 6px 0px #d1d1d1;
                padding: 10px;
                padding-top: 60px;
                padding-bottom: 5px;
                .title{
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%) translateY(-35%);
                    top: 0;
                    color: #999;
                    font-size: 13px;
                    img{
                        width: 60px;
                        height: 60px;
                        padding: 10px;
                        border-radius: 100%;
                        border: 3px solid white;
                        background: #73b1e4;
                    }
                }
                >div{
                    overflow: hidden;
                }
                >div>div{
                    width: 25%;
                    text-align: center;
                    float: left;
                    margin-bottom: 10px;
                    font-size: 13px;
                    cursor: pointer;
                    img{
                        width: 30px;
                        height: 30px;
                    }
                }
            }
            .slot-text{
                padding: 5px;
            }
            .slot-item{
                padding: 10px;
                font-size: 14px;
                cursor: pointer;
                border-radius: 5px;
            }
            .slot-item:hover{
                background: #73b1e4;
                color: white;
            }
        }
        .hot-list{
            cursor: pointer;
            div{
                padding: 10px;
            }
            div:hover{
                background: #eee;
            }
        }
        .range-index{
            display: inline-block;
            width: 10%;
            text-align: center;
            background: url(../assets/range-bg.png) no-repeat;
            background-size: 30px 30px;
            background-position: 50% 50%;
            height: 40px;
            line-height: 45px;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
        }
        
    }
}



// 消息列表
.message{
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}
.message .avatar{
    margin-left: 10px;
    margin-right: 10px;
}
.message .avatar img{
    width: 50px;
    height: 50px;
    padding: 10px;
    border-radius: 100%;
    background: white;
    box-sizing: border-box;
}
.message .text-container{
    background: white;
    color: #777;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    max-width: 80%;
    text-align: left;
    word-wrap: break-word;
    word-break: normal;
}
.reverse{
    flex-direction: row-reverse !important; 
}
.reverse .text{
    text-align: left;
}
.reverse .avatar img{
    padding: 0px !important;
}
.reverse .text-container{
    text-align: right;
    margin-right: 10px;
}
</style>